<template>
  <div class="app-container">
    <el-card class="box-card">
      <a>
        <img :src="itemDetail.trainCover" width="280px" height="180px"/>
      </a>
      <div class="box-item">
        <el-row style="font-size: 15px; line-height: 2em; color: #909399">
          <el-col :span="24">
            <el-link :underline="false" style="font-size: 20px; line-height: 2.5em">{{itemDetail.trainTitle}}</el-link>
            <el-button type="primary" size="medium" 
            style="float: right; margin-right: 30px; font-size: 15px"
            @click="updateItem">
            修改</el-button>
          </el-col>
          <el-col :span="24">
            {{"\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0"}}{{itemDetail.trainDescription | textHandle(itemDetail.trainDescription)}}
          </el-col>
          <el-col :span="8">
            培训类型：{{itemDetail.trainType}}
          </el-col>
          <el-col :span="8">
            培训计划：{{itemDetail.trainPlan}}
          </el-col>
          <el-col :span="8">
            报名审核：{{itemDetail.applyCheck}}
          </el-col>
          <el-col :span="8">
            培训形式：{{itemDetail.trainForm}}
          </el-col>
          <el-col :span="8">
            培训预算：{{itemDetail.trainBudget}}
          </el-col>
          <el-col :span="8">
            报名人数限制：{{itemDetail.applyNum}}
          </el-col>
          <el-col :span="8">
            开始时间：{{itemDetail.trainBetime.split("T")[0]}}
          </el-col>
          <el-col :span="8">
            结束时间：{{itemDetail.trainEndtime.split("T")[0]}}
          </el-col>
          <el-col :span="8">
            负责人：{{itemDetail.trainPrinc}}
          </el-col>
        </el-row>
      </div>
    </el-card>
    <navmenu></navmenu>
    <el-dialog title="修改培训项目" :visible.sync="dialogFormVisible">
        <el-form :model="itemTable" :rules="rules">
          <el-form-item label="项目名称" :label-width="formLabelWidth" prop="trainTitle">
            <el-input v-model="itemTable.trainTitle" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="培训类型" :label-width="formLabelWidth" prop="trainType">
            <el-input v-model="itemTable.trainType" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="培训计划" :label-width="formLabelWidth" prop="trainPlan">
            <el-input v-model="itemTable.trainPlan" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="报名审核" :label-width="formLabelWidth" prop="applyCheck">
            <el-input v-model="itemTable.applyCheck" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="培训形式" :label-width="formLabelWidth" prop="trainForm">
            <el-input v-model="itemTable.trainForm" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="培训预算" :label-width="formLabelWidth" prop="trainBudget">
            <el-input v-model="itemTable.trainBudget" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="人数限制" :label-width="formLabelWidth" prop="applyNum">
            <el-input v-model="itemTable.applyNum" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="负责人" :label-width="formLabelWidth" prop="trainPrinc">
            <el-input v-model="itemTable.trainPrinc" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="update">修 改</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import navmenu from '../navmenu/index.vue'
import { getItem } from '@/api/item'
import { updateItem } from '@/api/item'

export default {
  name: 'Detail',
  data() {
    return {
      itemId: 0,
      itemDetail: {},
      itemTable: {},
      dialogFormVisible: false,
      formLabelWidth: '80px',
      /* 规则限定 */
      rules: {
        trainTitle : {
          required: true,
          message: "内容不为空",
          trigger: "blur",
        },
        trainType : {
          required: true,
          message: "内容不为空",
          trigger: "blur",
        },
        trainPlan : {
          required: true,
          message: "内容不为空",
          trigger: "blur",
        },
        applyCheck : {
          required: true,
          message: "内容不为空",
          trigger: "blur",
        },
        trainForm : {
          required: true,
          message: "内容不为空",
          trigger: "blur",
        },
        trainBudget : {
          required: true,
          message: "内容不为空",
          trigger: "blur",
        },
        applyNum : {
          required: true,
          message: "内容不为空",
          trigger: "blur",
        },
        trainPrinc : {
          required: true,
          message: "内容不为空",
          trigger: "blur",
        }
      },
    }
  },filters: { 
      /* 给课程详情字段限制 */
  　　textHandle: function(val) {
      let textNew = val
      if (val.length > 135) {
        textNew = val.slice(0, 135) + '…'
      }
      return textNew
    },
  },
  // 注册组件
  components: {
    navmenu
  },
  created() {
    this.itemId = this.$route.query.itemId;
    this.getItemData(this.itemId)
  },
  methods: {
    getItemData(data){
      getItem(data).then((res) => {
        this.itemDetail = res.data
      }).catch((err) => {
        
      });
    },
    updateItem(){
      this.itemTable = this.itemDetail;
      this.dialogFormVisible = true;
    },
    update(){
      updateItem(this.itemTable).then((res) => {
        this.getItemData(this.itemId);
        this.dialogFormVisible = false;
      }).catch((err) => {
        
      });
    },
    cancel(){
      this.itemTable = [];
      this.dialogFormVisible = false;
      this.getItemData(this.itemId)
    }
  }
}
</script>

<style scoped>
.box-item{
  width: 75%;
  float: right;
}
.field-label{
  vertical-align: middle;
}
.box-card {
  width: 98%;
  max-width: 100%;
  margin: 20px auto;
}

.block {
  padding: 30px 24px;
}

.tag-item {
  margin-right: 15px;
}

</style>